<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!-- 万国码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通讯录</title>
<style>
*{padding:0;margin:0;}
.bos{
    width: 500px;
    height: 100%;
    /* border:3px dashed olive; */
    background:#ddd;
    margin: 50px auto;
}
header{
    width: 100%;
    height: 50px;
    font-size: 24px;
    text-align: center;
}
.box{
    margin-left: 10px;
}
table{
    margin-left: 10px;
}
.box input{
    width: 300px;
    height: 30px;
    font-size: 21px;
}
#btn{
    width: 70px;
    height: 35px;
    font-size: 21px;
    border-radius: 5px;
    margin:10px;
}
table tr th{
    width: 100px;
    height: 30px;
    text-align: center;
}
table tr td{
    text-align: center;
    /* font-size: 16px; */
}
body{
    position: relative;
}
.bloks{
    width: 100%;
    height:300px;
    text-align: center;
    position: absolute;
    background:rgba(46, 43, 43, 0.3);
    left: 0px;
    top: 0px;
    display: none;
}
.bloks input[type="text"]{
    width: 300px;
    height: 30px;
    font-size: 21px;
    margin-left: 30px;
}
.bloks button{
    width: 70px;
    height: 35px;
    font-size: 21px;
    border-radius: 5px;
    margin:30px;
}
.bloks span{
    margin-left: 30px;
}
</style>    
</head>
<body>
<dov class="bloks" id="fu">
    <span>姓名</span><br>
    <input class="ipto1" type="text" value="" placeholder="请输入姓名"><br>
    <span>电话</span><br>
    <input class="ipto2" type="text" value="" placeholder="请输入电话号码"><br>
    <span>邮箱</span><br>
    <input class="ipto3" type="text" value="" placeholder="请输入邮箱地址"><br>
    <button id="btna">修改</button>
    <button id="btnb">关闭</button>
</dov>
<div class="bos">
    <header>
        <p>通讯录</p>
    </header>
    <div class="box">
        <span>姓名</span><br>
        <input class="name" type="text" value="" placeholder="请输入姓名"><br>
        <span>电话</span><br>
        <input class="tel" type="text" value="" placeholder="请输入电话号码"><br>
        <span>邮箱</span><br>
        <input class="email" type="text" value="" placeholder="请输入邮箱地址"><br>
        <button id="btn">保存</button>
    </div>   
    <table border="1" class="tables" id="tables">
        <thead>
            <tr>
                <th>姓名</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr> 
        </thead>
        <!-- <tr>
            <td>刘亦菲</td>
            <td>1373464454</td>
            <td>123@163.com</td>
            <td>
                <button id="xiu">修改</button>
                <button id="shan">删除</button>
            </td>
        </tr> -->
    </table>
</div>
<!-- <script src="./jq3.js"></script> -->
<script>
var log = console.log;
btn.onclick = function(){
    var v1 = document.querySelector('.name').value;
    var v2 = document.querySelector('.tel').value;
    var v3 = document.querySelector('.email').value;
    var ts = document.querySelector('.tables');
    var obj = {
        name:v1,
        tel:v2,
        email:v3
    }
    console.log(obj)
    var all = localStorage.getItem('list')
    if(all){
        all = JSON.parse(all);
        all.push(obj);
        console.log(all)
        localStorage.setItem('list',JSON.stringify(all));
    }else{
        localStorage.setItem('list',JSON.stringify([obj]));
    }

    var str = '<tr>'+
            '<td>'+obj.name+'</td>'+
             '<td>'+obj.tel+'</td>'+
             '<td>'+obj.email+'</td>'+
             '<td>'+
                 '<button id="xiu">修改</button>'+
                ' <button id="shan">删除</button>'+
             '</td>'+
         '</tr>'
    console.log(ts)
    // tab.appendChild(str);
    // ts.insertAdjacentHTML('insertAfter',str)
    // ts.appendChild(str);
    ts.innerHTML += str
    // $('table').append(str);
}
//将localStorage中的数据渲染到表格上
getAll()
function getAll(){
    var all = localStorage.getItem('list');
    var ts = document.querySelector('.tables');
    all = JSON.parse(all);
    for(var i=0;i<all.length;i++){
        var str = '<tr>'+
            '<td>' +all[i].name+ '</td>'+
            '<td>' +all[i].tel+ '</td>'+
            '<td>' +all[i].email+ '</td>'+
            '<td>'+
                 '<button id="xiu">修改</button>'+
                ' <button id="shan">删除</button>'+
             '</td>'+
         '</tr>'
    // ts.insertAdjacentHTML('beforeend',str) 
    // $('table').append(str);
    ts.innerHTML += str          
    } 
}

//删除
tables.onclick = function(evt){
    // log(evt)
    var e = evt || window.event;
    var target = e.target || e.srcElement;
    // console.log(target.value)
    if(target.innerText == "删除"){
        var all = localStorage.getItem('list')
        all = JSON.parse(all);
        all.splice(target.index,1)
        localStorage.setItem('list',JSON.stringify(all));
        target.parentNode.parentNode.remove();
    }
//修改
    if(target.innerText == "修改"){
        var blok = document.querySelector('.bloks')
        blok.style.display = "block"
        var tr = target.parentNode.parentNode;
        var fv1 = document.querySelector('.ipto1');
        var fv2 = document.querySelector('.ipto2');
        var fv3 = document.querySelector('.ipto3');
        var all = localStorage.getItem('list');
        // log(tr)
        // log(all)
        // log(trs)
    
        var trs = document.querySelectorAll('tr')
        for(var i=0;i<trs.length;i++){
            if(tr == trs[i]){
                a = i-1
            }
        }
        index = a;
        // log(a)
        all = JSON.parse(all);
        // log(all)
        var obj = all[a];
        // log(obj)
        fv1.value = obj.name;
        fv2.value = obj.tel;
        fv3.value = obj.email;
    }
}
//保存

fu.onclick = function(evt){
    var e = evt ||window.event;
    var target = e.target || srcElement;
    if(target.innerText == "关闭"){
        fu.style.display = "none"

    }
    if(target.innerText == "修改"){
        // alert(1)
        var fv1 = document.querySelector('.ipto1');
        var fv2 = document.querySelector('.ipto2');
        var fv3 = document.querySelector('.ipto3');
        var all = localStorage.getItem('list');
        all = JSON.parse(all);
        var obj = {
            name:fv1.value,
            tel:fv2.value,
            email:fv3.value
        }
        all.splice(index,1,obj);
        localStorage.setItem('list',JSON.stringify(all));
        var tr = document.querySelectorAll('tr');
        for(var i=tr.length - 1;i>0;i--){
            tr[i].remove();
        }
        getAll();
        fu.style.display = "none"
    }
}





























// $('table').on('click','#shan',function(){
//     var tr = $(this).parent().parent();
//     var all = localStorage.getItem('list');
//     all = JSON.parse(all);
//     all.splice(tr.index(),1);
//     // console.log(tr)
//     localStorage.setItem('list',JSON.stringify(all));
//     tr.remove();  
// })



// 添加
// btn.onclick = function(){
//     var v1 = document.querySelector('.ipt1').value;
//     var v2 = document.querySelector('.ipt2').value;
//     var v3 = document.querySelector('.ipt3').value;
//     var ts = document.querySelector('.tables')
//     var trs = `
//         <tr>
//             <td>${v1}</td>
//             <td>${v2}</td>
//             <td>${v3}</td>
//             <td>
//                 <button id="xiu" onclick="gai(this)">修改</button>
//                 <button onclick="remove(this)" id="shan">删除</button>
//             </td>
//         </tr>
//     `
//     ts.insertAdjacentHTML('beforeend',trs)
// }

// 删除

// function remove(the){
//     the.parentNode.parentNode.remove();
// }

// 修改
// function gai(the){
//     // console.log(the.parentNode.parentNode)
//     // var v = the.parentNode.parentNode.querySelector('td')
//     var tds = document.querySelectorAll('td')
//     console.log(tds)

// }



</script>
</body>
</html>